<template>
	<view class="liveBox">
		<view class="topBox">
			<image src="../../static/images/indexTopBg.png" class="topBg"></image>
			<view class="navBox">
				<u-navbar title="大创客节" bgColor="transparent" :titleStyle="{fontWeight:'900',color:'#ffffff'}">
					<view class="u-nav-slot" slot="left"></view>
				</u-navbar>
			</view>
			<view class="searchBox" :style="'margin-top:'+(customBarHeight*2)+'rpx;'">
				<u-icon name="search" color="#49a1fd" size="40"></u-icon>
				<u-input border="none" placeholder="搜索直播/点播" v-model="keyWords" @confirm="getLiveList" :clearable="true"
					@clear="clearSearch"></u-input>
			</view>
			<view class="swiperBox">
				<u-swiper :list="bannerList" indicator :height="150" keyName="image" imgMode="scaleToFill"
					:circular="true" indicatorMode="dot"></u-swiper>
			</view>
		</view>
		<view class="yearsNavBox" :style="'top:'+(406+(customBarHeight*2))+'rpx;'">
			<view class="navList">
				<view :class="navIndex == index?'navItem bule':'navItem'" v-for="(item,index) in navList" :key="index"
					@click="changeNav(item,index)">
					{{item.name}}
					<view class="active" v-if="navIndex == index"></view>
				</view>
			</view>
		</view>
		<view class="liveList" :style="'padding-top:'+(540+(customBarHeight*2))+'rpx;'" v-if="liveList.length>0">
			<view class="liveItem" @click="playLive(item)" v-for="(item,index) in liveList" :key="index">
				<image :src="$cdn(item.image)" class="image"></image>
				<view class="content">
					<view class="itemTop">
						<text class="tag red" v-if="item.live_status==1">即将开始</text>
						<text class="tag green" v-if="item.live_status==2">正在直播</text>
						<text class="tag orange" v-if="item.live_status==3&&item.replay==''">直播结束</text>
						<text class="tag orange" v-if="item.live_status==3&&item.replay!=''">回放</text>
						<text class="name">{{item.name}}</text>
					</view>
					<view class="itemCenter">
						视频｜{{item.live_time}}
					</view>
					<view class="itemBottom">
						<image src="../../static/images/people.png" class="icon"></image>
						<view class="people">{{item.viewers}}观看</view>
					</view>
				</view>
			</view>
			<view class="fillBox"></view>
		</view>
		<view class="noData" :style="'padding-top:'+(540+(customBarHeight*2))+'rpx;'" v-else>
			<image src="../../static/images/nodata.png" class="image"></image>
			<view class="text">无直播记录～</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		getTermList,
		getLiveList,
		getBannerList
	} from "@/api/api.js"
	const app = getApp();
	export default {
		computed: {
			...mapGetters(['userInfo', 'isLogin'])
		},
		data() {
			return {
				keyWords: null,
				height: '',
				customBarHeight: Number(44 + app.globalData.statusBar),
				bannerList: [],
				navIndex: 0,
				navList: [],
				liveList: [],
				liveInterval: null
			}
		},
	
		onHide() {
			clearInterval(this.liveInterval)
		},
		destroyed() {
			clearInterval(this.liveInterval)
		},
		methods: {
			onLoadMethod() {
				this.keyWords = null
				this.getBannerList()
				this.getTermList()
			},
			onHideMethod() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				clearInterval(this.liveInterval)
			},
			clearSearch() {
				this.keyWords = null
				this.getLiveList()
			},
			//获取直播列表
			getLiveList() {
				getLiveList({
					jieshuo_id: this.navList[this.navIndex].id,
					name: this.keyWords
				}).then(res => {
					this.liveList = res.data
				})
			},
			//获取届数列表
			getTermList() {
				let that = this
				getTermList().then(res => {
					this.navList = res.data
					that.getLiveList()
					this.liveInterval = setInterval(() => {
						that.getLiveList()
					}, 5000)
				})
			},
			//获取轮播图列表
			getBannerList() {
				getBannerList().then(res => {
					this.bannerList = res.data
				})
			},
			//直播播放
			playLive(item) {
				if (!this.isLogin) {
					return this.$emit('userLogin')
				}
				if (item.live_status == 1) {
					return this.$Tips({
						title: '直播未开始,请稍后'
					})
				} else if (item.live_status == 3 && item.replay == '') {
					return this.$Tips({
						title: '直播已结束,等待回放生成'
					})
				} else {
					this.$Tips('/pages/liveDetail/liveDetail?id=' + item.id)
				}
			},
			searchLive() {
				console.log(this.keyWords)
				this.getLiveList()
			},
			changeNav(item, index) {
				this.navIndex = index
				this.getLiveList()
			},

		}
	}
</script>
<style lang="scss" scoped>
	.liveBox {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.fillBox {
		width: 100%;
		height: 108rpx;
		background: #f8f8f8;
	}

	.topBox {
		height: 468rpx;
		width: 100%;
		position: fixed;
		top: 0;

		.topBg {
			position: absolute;
			width: 100%;
		}

		.image {
			width: 100%;
			height: 100%;
		}

		.searchBox {
			display: flex;
			position: relative;
			z-index: 100;
			align-items: center;
			margin: 160rpx 34rpx 18rpx;
			padding: 0 20rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
			border-radius: 24rpx;
		}

		/deep/ .searchBox .u-input {
			height: 100%;
			padding: 0 20rpx !important;
		}

		.swiperBox {
			margin: 0 34rpx;
			height: 300rpx;
		}
	}

	.yearsNavBox {
		position: fixed;
		width: 100%;
		top: 568rpx;
		background-color: #f8f8f8;
	}

	.navList {
		margin: 20rpx 34rpx 0rpx;
		padding: 0 46rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 28rpx;

		.navItem {
			text-align: center;
			padding: 23rpx 0;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #737373;

			.active {
				position: absolute;
				bottom: 0;
				width: 88rpx;
				height: 3rpx;
				background: #49A1FD;
			}
		}

		.bule {
			color: #49A1FD;
		}

	}

	.liveList {
		margin: 0 34rpx;
		padding-top: 690rpx;

		.liveItem {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 4rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 20rpx;
			margin-bottom: 20rpx;

			.image {
				width: 224rpx;
				height: 168rpx;
				margin-right: 14rpx;
			}

			.content {
				flex: 1;

				.itemTop {
					color: #FFFFFF;
					font-size: 16rpx;

					.tag {
						padding: 4rpx 6rpx;
						height: 30rpx;
						font-size: 22rpx;
						border-radius: 4rpx;
					}

					.green {
						background: #0CB76C;
					}

					.red {
						background: #FB2525;
					}

					.orange {
						background: #EB5C20;
					}

					.name {
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						margin-left: 4rpx;
					}
				}

				.itemCenter {
					padding: 8rpx 0 16rpx;
					font-size: 24rpx;
					color: #737373;
				}

				.itemBottom {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #737373;

					.icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 14rpx;
					}
				}
			}
		}
	}

	.noData {
		padding-top: 290rpx;
		margin: 0 auto;
		text-align: center;

		.image {
			width: 320rpx;
			height: 320rpx;
		}

		.text {
			font-size: 28rpx;
			color: #B0B0B0;
		}
	}
</style>